<template>
  <div class="home-new">
    <div class="home-new-title">
      <h3>每周上新</h3>
    </div>
    <ul>
      <li v-for="item in newList" :key="item.id">
        <img :src="item.list_pic_url" alt="" />
        <p>{{ item.name }}</p>
        <p><span>￥</span>{{ item.retail_price }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
const newList = [
  { name: '泡芙棉花糖布艺沙发现代简约客厅小户型法式奶油风猫抓布云朵沙发', list_pic_url: '/images/new1.jpg', retail_price: '9000.00' },
  { name: '大象耳朵布艺床简约现代猫抓布主卧床意式极简科技布', list_pic_url: '/images/new2.jpg', retail_price: '4000.00' },
  { name: '多巴胺彩色发夹波浪夹子碎发卡刘海夹无痕一字夹不伤发饰头饰', list_pic_url: '/images/new3.jpg', retail_price: '200' },
  { name: '韩国ins博主天蓝色海星发夹甜酷风海边度假鸭嘴几何侧边夹刘海夹', list_pic_url: '/images/new4.jpg', retail_price: '100' }
]
</script>

<style lang="less" scoped>
 .home-new {
   .home-new-title {
     text-align: center;
     font-size: 16px;
     margin-top: 1.6rem;
     height: 50px;

     h3 {
       width: 50%;
       border-top: 2px solid #ccc;
       padding-top: 8px;
       margin: 0 auto;
     }
   }

   ul {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     padding: 1rem 0 0;
     background-color: #f9f9f9;

     li {
       width:
         49.5%;

       img {
         width: 100%;
       }

       p {
         text-align: center;
         margin: 0.5rem 0;
       }

       span {
         color: #FF8000;
         font-size: 12px;
       }
     }
   }
 }
</style>